<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>购物车页面</title>
	<link rel="stylesheet" href="./css/base.css" type="text/css">
	<link rel="stylesheet" href="./css/global.css" type="text/css">
	<link rel="stylesheet" href="./css/header.css" type="text/css">
	<link rel="stylesheet" href="./css/cart.css" type="text/css">
	<link rel="stylesheet" href="./css/footer.css" type="text/css">

	<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="./js/cart1(1).js"></script>

</head>

<body>
	<!-- 顶部导航 start -->
	<div class="topnav">
		<div class="topnav_bd w990 bc">
			<div class="topnav_left">

			</div>
			<div class="topnav_right fr">
				<ul>
					<li>您好，欢迎来到京西！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
					<li class="line">|</li>
					<li>我的订单</li>
					<li class="line">|</li>
					<li>客户服务</li>

				</ul>
			</div>
		</div>
	</div>
	<!-- 顶部导航 end -->

	<div style="clear:both;"></div>

	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="./imgs/logo.png" alt="京西商城"></a></h2>
			<div class="flow fr">
				<ul>
					<li class="cur">1.我的购物车</li>
					<li>2.填写核对订单信息</li>
					<li>3.成功提交订单</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 页面头部 end -->

	<div style="clear:both;"></div>

	<!-- 主体部分 start -->
	<div class="mycart w990 mt10 bc">
		<h2><span>我的购物车</span></h2>
		<table>
			<thead>
				<tr>
					<th class="col1">商品名称</th>
					<th class="col2">商品信息</th>
					<th class="col3">单价</th>
					<th class="col4">数量</th>
					<th class="col5">小计</th>
					<th class="col6">操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
					<td class="col1"><a href=""><img src="./imgs/cart_goods1.jpg" alt="" /></a> <strong><a
								href="">【1111购物狂欢节】惠JackJones杰克琼斯纯羊毛菱形格</a></strong></td>
					<td class="col2">
						<p>颜色：073深红</p>
						<p>尺码：170/92A/S</p>
					</td>
					<td class="col3">￥<span>499.00</span></td>
					<td class="col4">
						<a href="javascript:;" class="reduce_num"></a>
						<input type="text" name="amount" value="1" class="amount" />
						<a href="javascript:;" class="add_num"></a>
					</td>
					<td class="col5">￥<span>499.00</span></td>
					<td class="col6"><a href="">删除</a></td>
				</tr>
				<tr>
					<td class="col1"><a href=""><img src="./imgs/cart_goods2.jpg" alt="" /></a> <strong><a
								href="">九牧王王正品新款时尚休闲中长款茄克EK01357200</a></strong></td>
					<td class="col2">
						<p>颜色：淡蓝色</p>
						<p>尺码：165/88</p>
					</td>
					<td class="col3">￥<span>1102.00</span></td>
					<td class="col4">
						<a href="javascript:;" class="reduce_num"></a>
						<input type="text" name="amount" value="1" class="amount" />
						<a href="javascript:;" class="add_num"></a>
					</td>
					<td class="col5">￥<span>1102.00</span></td>
					<td class="col6"><a href="">删除</a></td>
				</tr>
				<tr>
					<td class="col1"><a href=""><img src="./imgs/cart_goods3.jpg" alt="" /></a> <strong><a
								href="">【1111购物狂欢节】捷王纯手工缝制休闲男鞋大头皮鞋 头层牛</a></strong></td>
					<td class="col2">
						<p>颜色：0922红棕现货</p>
						<p>尺码：40现货</p>
					</td>
					<td class="col3">￥<span>269.00</span></td>
					<td class="col4">
						<a href="javascript:;" class="reduce_num"></a>
						<input type="text" name="amount" value="1" class="amount" />
						<a href="javascript:;" class="add_num"></a>
					</td>
					<td class="col5">￥<span>269.00</span></td>
					<td class="col6"><a href="">删除</a></td>
				</tr> -->
			</tbody>
			<tfoot>
				<tr>
					<td colspan="6">购物金额总计： <strong>￥ <span id="total">1870.00</span></strong></td>
				</tr>
			</tfoot>
		</table>
		<div class="cart_btn w990 bc mt10">
			<a href="" class="continue">继续购物</a>
			<a href="#" class="checkout">结 算</a>
		</div>
	</div>
	<!-- 主体部分 end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">京西论坛</a>
		</p>
		<p class="copyright">
			© 2005-2013 京东网上商城 版权所有，并保留所有权利。 ICP备案证书号:京ICP证070359号
		</p>
		<p class="auth">
			<a href=""><img src="./imgs/xin.png" alt="" /></a>
			<a href=""><img src="./imgs/kexin.jpg" alt="" /></a>
			<a href=""><img src="./imgs/police.jpg" alt="" /></a>
			<a href=""><img src="./imgs/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
</body>

</html>
<!-- <script src="./js/utils.js"></script>
<script>
	$(function () {

		//这是购物车接口
		let token = localStorage.getItem('token') || '861a00333edae4e5ccbaa69718ac2d552906'
		$.get('http://kg.zhaodashen.cn/v1/cart/index.jsp', { token }, res => {
			console.log(res)
			let tfoot = ''
			let tbody = ''
			let sum = 0
			console.log(res)
			if (res, res.meta.state == 200) {
				let num = 0
				$(res.data).each((index, item) => {
					num = item.goods_price * item.goods_number
					tbody += `
	  <tr id=${item.goods_id}>
	  <td class="col1"><a href=""><img src="http://tmp00001.zhaodashen.cn/${item.imgs[0].img_url}" alt=""/></a>  <strong><a href="">${item.goods_name}</a></strong></td>
	  <td class="col2"> <p>颜色：073深红</p> <p>尺码：170/92A/S</p> </td>
	  <td class="col3">￥<span>${item.goods_price}</span></td>
	  <td class="col4"> 
		<a href="javascript:;" class="reduce_num"></a>
		<input type="text" name="amount" value="${item.goods_number}" class="amount"/>
		<a href="javascript:;" class="add_num"></a>
	  </td>
	  <td class="col5">￥<span>${num}</span></td>
	  <td class="col6"><a href="">删除</a></td>
	</tr>

	`
					sum += num
				})
				tfoot += `
	<tr>
	  <td colspan="6">购物金额总计： <strong>￥ <span id="total">${sum}</span></strong></td>
	</tr>
  `
				$('tbody').append(tbody)
				$('tfoot').append(tfoot)
			}

		}, 'json')

		let value = $('.amount').val()
		console.log(value)
		//设置加+，减-，正则判断value
		$('tbody').on('click', '.add_num', function () {
			// this .add +  JS标签对象
			// 1-获取到前一个兄弟数字，
			var num = $(this).prev().val()
			//  console.log(num)  // 页面获取的都是字符串
			// 2-增1 ，
			num = parseInt(num) + 1 // 举例：当num结果是a1  就会变成 NaN+1 结果还是NaN
			if (isNaN(num)) num = 1
			// 3-再放进去
			$(this).prev().val(num)


		})
		$('tbody').on('click', '.reduce_num', function () {
			// this -标签  JS标签对象

			// 1-获取到后一个兄弟数字，
			var num = $(this).next().val()
			// 2-减1 ，
			num = parseInt(num) - 1    // 2  1  0
			if (isNaN(num) || num < 1) num = 1
			// 3-再放进去
			$(this).next().val(num)
			// total()

		})

		// input框键松开
		// 步骤1：给商品数量input框 增加 键盘松开事件
		// 步骤2：在键盘松开事件中 -> 1-获取数据，2-正则过滤非数字替换掉，3-小于1重置为1，4-再放进去
		$('tbody').on('keyup', '.amount', function () {
			// this 代表 .num input框  JS标签对象

			// 1-获取数据，
			var num = $(this).val()
			// 2-正则过滤非数字替换掉，
			num = num.replace(/[^0-9]/g, '')
			// console.log(num)
			// 3-小于1重置为1，
			if (isNaN(num) || num < 1) num = 1
			// 4-再放进去
			$(this).val(num)
			// total()
		})



		$('#abc>.checkout').click(function () {
			$(this).attr("href", "./flow2.html");
		})

		//更改数据库里的数据
		let goodsId = $(this).parents('tr').attr("id");
		console.log(goodsId)
		let buyNum = num
		$.post('http://kg.zhaodashen.cn/v1/cart/update.jsp', { goodsId, buyNum, token }, res => {
			console.log(res);
		}, 'json')

		//tr只要有单击事件，就会请求接口
		$('tbody>tr').click(function () {

		})
	});

</script> -->